<template>
  <div class="app-container">
    <div class="dataTable">
      <el-form :inline="true" label-position="right" label-width="72px" style="width: 100%; margin-top:0px;">
        <el-form-item label="单据日期:" prop="billDate" label-width="72px">
          <el-date-picker v-model="form.billDate" :editable="false" type="date" placeholder="单据日期" size="small" style="width:140px" :clearable="false" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="单据号:" prop="billNo" label-width="50px">
          <el-input v-model="form.billNo" size="small" placeholder="单据号" disabled />
        </el-form-item>
        <el-form-item label="供应商:" prop="supplierId" label-width="50px">
          <supplierList :select-id="form.supplierId" :select-name="form.supplierName" @selectChange="selectChange" />
        </el-form-item>
        <el-form-item label="业务员:" prop="staffId" label-width="50px">
          <staffList :select-id="form.staffId" @selectChange="selectChange" />
        </el-form-item>
        <el-form-item label="现结金额:" prop="amount" label-width="72px">
          <el-input v-model="form.amount" size="small" placeholder="现结金额" style="width:75px" disabled />
          <el-button size="small" style="width:45px;padding:8px" @click="showSettleType">选择</el-button>
        </el-form-item>
        <el-button size="small" style="margin-top:3px" :disabled="!form.supplierId" type="primary" @click="showSaleBill">选择采购单</el-button>
      </el-form>
    </div>
    <div class="contentDiv">
      <el-table :data="tableData" border fit highlight-current-row style="width: 100%;" cell-class-name="tdCell" size="mini" max-height="600">
        <el-empty slot="empty" :image-size="120" />
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="单据日期" align="center">
          <template slot-scope="{row}">
            <span>{{ row.billDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单据号" align="center">
          <template slot-scope="{row}">
            <span>{{ row.billNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单据金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.billAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应付金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.billBalance }}</span>
          </template>
        </el-table-column>
        <el-table-column label="付款金额" align="right">
          <template slot-scope="{row}">
            <input v-model="row.amount" class="inputCell tx-r" style="height:32px" @focus="$event.target.select()" />
          </template>
        </el-table-column>
      </el-table>
      <div v-if="status!=1&&status!=2" class="tx-c" style="margin-top:15px">
        <el-button class="filter-item" type="primary" @click="save">保存</el-button>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" title="选择采购单" :visible.sync="dialogVisible1" width="720px">
      <div class="filter-container">
        <span class="zhi" style="font-weight:bold; margin:0 5px">起止日期</span>
        <el-date-picker v-model="modalQuery.billDate1" :editable="false" type="date" placeholder="开始日期" size="small" :clearable="false" value-format="yyyy-MM-dd" style="width:140px;" />
        <span class="zhi">至</span>
        <el-date-picker v-model="modalQuery.billDate2" :editable="false" type="date" placeholder="结束日期" size="small" :clearable="false" value-format="yyyy-MM-dd" style="width:140px;" />
        <el-button size="small" type="primary" @click="getPurechaseList">查询</el-button>
      </div>
      <el-table ref="dataTable" :data="modalData" border fit highlight-current-row style="width: 100%;" size="mini" @selection-change="selectChange">
        <el-table-column type="selection" width="50" align="center" :reserve-selection="true" />
        <el-table-column label="供应商" align="center">
          <template slot-scope="{row}">
            <span>{{ row.supplierName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单据日期" align="center">
          <template slot-scope="{row}">
            <span>{{ row.billDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单据号" align="center">
          <template slot-scope="{row}">
            <span>{{ row.billNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单据金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.billAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应收金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.billBalance }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="default" size="small" @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" size="small" @click="saveSelect">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="结算方式" :visible.sync="dialogVisible" width="420px">
      <el-table :data="settleData" border fit highlight-current-row style="width: 100%;" size="small" cell-class-name="tdCell">
        <el-table-column label="名称" width="146">
          <template slot-scope="scope">
            <settleTypeList :settle-type-arr="settleTypeArr" :select-code="scope.row.settleTypeCode" :select-arap="scope.row.arAp" :select-name="scope.row.settleTypeName" :index="scope.$index" @settleTypeChange="settleTypeChange" />
          </template>
        </el-table-column>
        <el-table-column label="预付应付标志" width="120">
          <template slot-scope="{row}">
            <input v-model="row.arAp" type="text" class="inputCell tx-l" disabled />
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="scope">
            <input v-model="scope.row.amount" type="text" class="inputCell tx-l" @change="calculate1(scope.$index)" @focus="focusThis($event)" />
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getByHeaderId, saveReceiptPayment, getPurchaseListBySupplierId } from '@/api/rp'
import { deleteEmptyProp, addNullObj, addNullObj2 } from '@/utils'
import staffList from '@/components/selects/staffList'
import supplierList from '@/components/selects/supplierList'
import settleTypeList from '@/components/selects/settleTypeList'
import { getNowDate } from '@/utils/auth'
export default {
  name: 'PaymentAdd',
  components: { staffList, supplierList, settleTypeList },
  data() {
    return {
      id: '',
      isDisabled: false,
      status: this.$route.query.status,
      tableData: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      invCatgList: [],
      measList: [],
      modalQuery: {
        supplierId: '',
        billDate1: '2020-01-01',
        billDate2: getNowDate(),
        desc: 0
      },
      form: {
        billNo: '',
        billDate: getNowDate(),
        staffId: '',
        supplierId: '',
        crDr: '-1',
        amount: 0
      },
      dialogVisible: false,
      dialogVisible1: false,
      selectedData: [],
      settleData: [{}, {}, {}, {}, {}],
      modalData: []
    }
  },
  computed: {
    ...mapGetters(['settleTypeArr'])
  },
  created() {
    this.$store.dispatch('basedata/getReceiptSettleType', { crDr: -1 })
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      getByHeaderId(this.id).then((res) => {
        for (var key in this.form) {
          this.form[key] = res.data.data[key]
        }
        this.tableData = addNullObj(res.data.data.billLine || [])
        this.settleData = addNullObj2(res.data.data.settleTypeDetail || [])
      })
    } else {
      this.getPurechaseList()
    }
  },
  methods: {
    focusThis(e) {
      e.currentTarget.select()
    },
    showSaleBill() {
      this.dialogVisible1 = true
    },
    showSettleType() {
      this.dialogVisible = true
    },
    selectChange(obj) {
      for (var key in obj) {
        this.form[key] = obj[key]
      }
      this.getPurechaseList()
      this.tableData = [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {}
      ]
      if (this.selectedData.length > 0) {
        this.$refs.dataTable.clearSelection()
        this.selectedData = []
      }
      this.selectedData = []
    },
    settleTypeChange(obj) {
      for (var key in obj) {
        this.settleData[obj.index][key] = obj[key]
      }
    },
    saveSelect() {
      if (this.selectedData.length === 0) {
        this.$message.warning('请选择采购单据')
        return
      }
      this.tableData = this.selectedData
      this.dialogVisible1 = false
    },
    calculate1(index) {
      var amount = 0
      for (var i = 0; i < this.settleData.length; i++) {
        if (this.settleData[i] && this.settleData[i].amount) {
          amount += Number(this.settleData[i].amount)
        }
      }
      this.form.amount = parseFloat(amount).toFixed(2)
    },
    getPurechaseList() {
      this.modalQuery.supplierId = this.form.supplierId
      this.modalQuery.staffId = this.form.staffId
      this.modalQuery.crDr = -1
      getPurchaseListBySupplierId(this.modalQuery).then((res) => {
        this.modalData = res.data.data || []
      })
    },
    save() {
      if (this.selectedData.length === 0) {
        this.$message.warning('付款明细不能为空')
        return
      }
      this.form.id = this.id
      this.form.billLine = deleteEmptyProp(this.tableData)
      this.form.settleTypeDetail = this.settleData
      saveReceiptPayment(this.form).then((res) => {
        if (res.data.errorCode === '0') {
          this.$message.success(res.data.msg)
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.replace('/rp/payment')
        }
      }).catch(() => {
        this.$message.error('保存失败，请稍后重试！')
      })
    }
  }
}
</script>
